<template>
  <div class="flex flex-col gr-4">
    <ListItem>
      <div>选择候选形式</div>
      <div>
        <a-select
          ref="select"
          size="small"
          v-model:value="multipleConfig.type"
          style="width: 200px"
          :options="multipleList"
        ></a-select>
      </div>
    </ListItem>

    <ListItem>
      <div></div>
      <div>
        <a-button type="primary" size="small" @click="newItem.showList = true">编辑列表</a-button>
      </div>
    </ListItem>
    <InDialog title="添加候选值" v-model:show="newItem.showList" class="w-100 table-dialog" >
      <div @drop="drop" @dragover="dragover">
        <div class="text-999 flex justify-between my-4">
          <div><a-button size="small" @click="newItem.show = !newItem.show">新增</a-button></div>
        </div>
        <div class="relative">
          <div class="flex py-4 justify-between text-center text-14 header">
            <div class="flex-2 w-100">键</div>
            <div class="flex-2">值</div>
            <div class="flex-1">操作</div>
          </div>

          <ScrollItem :height="160">
            <ul class="flex flex-col text-center list" v-if="multipleConfig.list.length !== 0">
              <li class="flex justify-between text-center py-4" v-for="item in multipleConfig.list">
                <div class="flex-2">{{ item.label }}</div>
                <div class="flex-2">{{ item.value }}</div>
                <div class="flex-1">
                  <delete-outlined @click="deleteItem(item)" />
                </div>
              </li>
            </ul>
            <div v-else class="flex flex-s">
              <Empty width="100"/>
            </div>
          </ScrollItem>

          <InDialog title="新的记录" v-model:show="newItem.show" theme="dark">
            <div class="flex gr-2 flex-col">
              <ListItem theme="dark">
                <div class="mr-4">键</div>
                <div>
                  <a-input
                    size="small"
                    v-model:value="newItem.label"
                    @input="newItem.value=newItem.label"
                    @pressEnter="addNewItem"
                    placeholder="输入键名"
                  ></a-input>
                </div>
              </ListItem>
              <ListItem theme="dark">
                <div class="mr-4">值</div>
                <div>
                  <a-input
                    size="small"
                    v-model:value="newItem.value"
                    placeholder="输入真实值"
                  ></a-input>
                </div>
              </ListItem>
            </div>
            <div class="mt-4 text-right">
              <a-button type="primary" size="small" @click="addNewItem">确定</a-button>
            </div>
          </InDialog>
        </div>
      </div>
    </InDialog>
  </div>
</template>

<script setup lang="ts">
import { treeBus } from "@/views/bus/treeData";
import { computed, ref } from "vue";
import ListItem from "../../components/InListItem.vue";

import ScrollItem from "@/views/components/ScrollItem.vue";
import Empty from "@/views/components/InEmpty.vue";
import { message } from "ant-design-vue";
import { showUI } from "@/views/bus/source";
import { toOptions } from "@/store/utils/dictionay";
import InDialog from "@/views/components/InDialog.vue";
const newItem = ref<dropdownItem & { show: boolean; showList: boolean }>({
  value: "",
  label: "",
  show: false,
  showList: false
});
type dropdownItem = {
  value: string;
  label: string;
};

/* 拖拽 */
const dragover = (e: Event) => {
  e.preventDefault();
};
const drop = () => {
  const e = window.event as DragEvent;
  e.preventDefault();
  var dictionary = e.dataTransfer?.getData("dictionary");
  if (!dictionary) return;
  var data = JSON.parse(dictionary);
  let options = toOptions(data.children);
  options.forEach((item) => {
    var { label, value } = item;
    var isExist = multipleConfig.value.list.findIndex((e: any) => {
      if (e.label == item.label && e.value === item.value) {
        return item;
      }
    });
    if (isExist < 0) {
      multipleConfig.value.list.push({ label, value });
    }
  });
};

/* 拖拽 */
const multipleConfig = computed(() => {
  return treeBus.selectItem.config.multiple;
});
const addNewItem = () => {
  var { label, value } = newItem.value;
  multipleConfig.value.list.push({ label, value });
  message.success("成功添加");
  newItem.value.label = "";
  newItem.value.value = "";
  newItem.value.show = false;
  showUI();
};
const multipleList = ref([
  {
    label: "下拉菜单",
    value: "dropdown"
  },
  {
    label: "单选",
    value: "ratio"
  }
]);
const deleteItem = (item: dropdownItem) => {
  treeBus.selectItem.config.multiple.list = multipleConfig.value.list.filter((el: dropdownItem) => {
    if (el.label !== item.label && el.value === el.value) {
      return el;
    }
  });
};
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 1px solid #666;
  padding-bottom: 4px;
}
ul.list {
  li {
    border-bottom: 1px solid #eee;
    &:hover{
      background-color: #eee;
    }
  }
}
.table-dialog {
  width: 60%;
  left: 20% !important;
  min-height: 350px;
}
</style>
